<template>
	<!--拍品列表-->
	<div id="GroupNews">
		<x-header :left-options="{showBack: false}" title="群发消息" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" @click="sendNews">发送</a>
		</x-header>
		<div class="product-list">
			<div v-if="status.code == 0">
				<div class="no-data">
					<img src="../../assets/images/home/nodata.png" />
				</div>
			</div>
			<div class="contentWrap" v-else>
				<div class="list">
					<div class="item" v-for="(item,index) in shopList" :key="index" @click="check(index,item.auction_id)">
						<div>
							<span v-if="item.bidding_count == 0 && item.auction_endtime < cur_time" class="pass">已流拍</span>
							<div class="img">
								<img :src="'/los/uploads/thumb/goods/' + item.goods_id + '_172X208.jpeg'" />
							</div>
							<div class="info">
								<p class="name">{{item.goods_name}}</p>
								<p class="price"><span>￥{{item.auction_bidprice}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<bottom></bottom>
			<toast v-model="success" type="text" width='4rem' is-show-mask>{{msg}}</toast>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import CountDown from 'vue2-countdown';
	import bottom from '../comp/Footer';
	import { Tab, TabItem, XHeader, Toast } from 'vux'
	import axios from 'axios';
	export default {
		data() {
			return {
				tabBarFixed: false,
				over: false,
				cache: true,
				shopList: [],
				category_id: 0,
				urls: '',
				status: '',
				sendAuction: [],
				success: false,
				msg: '',
				flag: false,
				shop_id: ''
			}
		},
		components: {
			Tab,
			TabItem,
			CountDown,
			bottom,
			XHeader,
			Toast
		},
		activated() {
			this.getAuctionList();

		},
		methods: {
			check: function(index, auction_id) {
				if($('.item').eq(index).hasClass('isActive')) {
					$('.item').eq(index).removeClass('isActive');
					this.sendAuction.splice(-1, 1);
					console.log(this.sendAuction.join(','));
				} else {
					$('.item').eq(index).addClass('isActive');
					this.sendAuction.push(auction_id);
					console.log(this.sendAuction.join(','));
				}
			},
			sendNews: function() {
				var params = {
					data: {
						auction_ids: this.sendAuction.join(',')
					}
				}
				if(this.sendAuction == '') {
					this.success = !this.success;
					this.msg = '请选择商品'
				} else if(this.sendAuction.length > 7) {
					this.success = !this.success;
					this.msg = '群发数量不得超过7款'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/seller/shop_msg.json',
						data: params,
					}).then((result) => {
						this.success = !this.success;
						this.msg = '发送成功'
						setTimeout(function() {
							location.href = '#/User'
						}, 1000)
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			//获取带状态拍卖信息
			getAuctionList: function() {
				this.shop_id = JSON.parse(window.sessionStorage.getItem("member")).shop_id;
				console.log(this.shop_id);
				let _this = this;
				let more = true;
				let page = 1;
				this.$http({
					method: 'GET',
					url: '/los/api/member/auction_list.json?ts=1',
					data: '',
				}).then((result) => {
					this.cache = false;
					this.status = result.data;
					this.shopList = result.data.data;
					this.cur_time = result.data.cur_time;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					//获取网页的总高度
					var htmlHeight = $(document).height();
					//浏览器中的可视高度
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/member/auction_list.json?ts=1' + '&page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.shopList.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});

						}
					}
				})
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}

	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}

	.header {
		background: #fff;
		position: fixed;
		z-index: 999;
		width: 100%;
	}

	.isActive {
		border: solid 1px red;
	}
	/*列表项*/

	.product-list {
		width: 100%;
		overflow: hidden;
		padding-bottom: 2rem;
		padding-top: 1.2rem;
	}

	.product-list .list {
		width: 100%;
		padding: 0.26rem;
		overflow-y: auto;
	}

	.product-list .list .item {
		position: relative;
		float: left;
		margin-bottom: 0.24rem;
		width: 4.61rem;
		margin-right: 0.24rem;
	}

	.product-list .list .item:nth-child(2n) {
		margin-right: 0;
	}

	.product-list .list .item .img {
		position: relative;
		font-size: 0;
	}

	.product-list .list .item .img img {
		width: 100%;
		height: 5.57rem;
		border-top-left-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
	}

	.product-list .list .item .img .time {
		width: 100%;
		height: 0.66666rem;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 0.26666rem;
		font-size: 0.26666rem;
		color: #fff;
		line-height: 0.72rem;
		background: linear-gradient(rgb(0,0,0,0),rgb(0,0,0,0.5));
	}

	.product-list .list .item .pass {
		position: absolute;
		z-index: 10;
		right: 0;
		background: #aaa;
		color: #fff;
		width: 1.41rem;
		height: 0.53rem;
		font-size: 0.32rem;
		margin-left: 0.26rem;
		display: inline-block;
		line-height: 0.53rem;
		text-align: center;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}

	.product-list .list .item .info {
		padding: 0.32rem 0.21333rem 0.34666rem;
		/*border: solid 1px #e6e6e6;*/
		/*border-top: none;*/
		background: #fff;
		height: 1.81rem;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}

	.product-list .list .item .info .name {
		font-size: 0.34rem;
		color: #333;
		margin-bottom: 0.26rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.product-list .list .item .info .price {
		color: #aaa;
		font-size: 0.29333rem;
		float: left;
	}

	.product-list .list .item .info .like {
		float: right;
		overflow: hidden;
	}

	.product-list .list .item .info .like img {
		/*float: right;*/
		width: 0.36rem;
		height: 0.36rem;
		margin-left: 0.13rem;
	}

	.product-list .list .item .info .like span {
		font-size: 0.34rem;
		color: #aaa;
	}

	.product-list .list .item .info .price span {
		color: #EB443C;
		font-size: 0.4rem;
	}

	.product-list .list .item .icon-auction {
		position: absolute;
		top: 0;
		left: 0.3rem;
		padding: 0.05rem 0.1rem;
		color: #fff;
		font-size: 0.32rem;
		background-color: #db4342;
		border-bottom-left-radius: 0.05333rem;
		border-bottom-right-radius: 0.05333rem;
	}
</style>
